<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.mask{
				display: none;
				width:100%;
				height: 100%;
				background: rgba(0,0,0,0.5);
				position: fixed;
				top: 0px;
				left: 0px;
				border-radius: 5px;
			}
			.btn{
				width:100px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				color: #CCCC77;
				background-color: purple;
			}
			.login{
				width: 300px;
				height: 300px;
				background: #FE8F2F;
				position: fixed;
				top: 50px;
				left: 50px;
				border-radius: 5px;
				display: none;
			}
			.login .title{
				width: 100%;
				height: 50px;
				border-radius: 5px;
				background: #006400;
				line-height: 50px;
				text-indent: 10px;
				font-family: "microsoft yahei";
				font-size: 20px;
				color: #fff;
				font-weight: bold;
				cursor: pointer;
			}
			.login .title .close{
				width: 50px;
				height: 50px;
				font-size: 35px;
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="btn">登录</div>
		<div class="mask"></div>
		<div class="login">
			<div class="title">用户登录
				<span class="close">X</span>
			</div>
		</div>
		<script>
			var btn = document.getElementsByClassName('btn')[0];
			var close = document.getElementsByClassName('close')[0];
			var mask = document.getElementsByClassName('mask')[0];
			var login = document.getElementsByClassName('login')[0];
			var title = document.getElementsByClassName('title')[0];
			var X=0, Y=0, T=0,L=0;
			
			btn.onclick = function(){
				center();
				mask.style.display = 'block';
				login.style.display = 'block';
			}
			close.onclick = function(){
				mask.style.display = 'none';
				login.style.display = 'none';
			}
			function center(){
				W = (window.innerWidth-300)/2;
				H = (window.innerHeight-300)/2;
				login.style.left = W+'px';
				login.style.top = H+'px';
			}
			window.onresize = function(){
				center();
			}
			//原理  现在的left、top值 - 开始left 、top值 = 移动中鼠标的Ｘ　Ｙ　　－　鼠标按下时的Ｘ　Ｙ
			//获取鼠标按下时的X Y
			
			title.onmousedown = function(e){
				var isover=true;
				var e = e||window.event;
				 X = e.clientX;
				 Y = e.clientY;
				 T = login.offsetTop;
				 L = login.offsetLeft;
				 console.log(X+','+Y+','+T+','+L);
				document.onmousemove = function(e){
					if (isover) {
						var e = e||window.event;
					  	var	nowclientX = e.clientX;
					 	var	nowclientY = e.clientY;
						var _left = nowclientX-X+L;
						var _top = nowclientY-Y+T;
						login.style.left=_left+'px';
						login.style.top=_top+'px';
					}
					document.onmouseup = function(){
						isover=false;
					}
				}
			}
		</script>
	</body>
</html>
